<template>
  <!-- component动态组件 -->
  <component :is="type" v-bind="linkProps(to)">
    <slot />
  </component>
</template>

<script>
export default {
  props: {
    to: {
      type: String,
      required: true
    }
  },
  computed: {
    isExternalUrl() {
      return tools.isExternalUrl(this.to)
    },
    type() { // 根据链接是否是外部链接，使用a标签或者vue-router路由
      if (this.isExternalUrl) {
        return 'a'
      }
      return 'router-link'
    }
  },
  methods: {
    linkProps(to) {
      // 时间绑定
      if (this.isExternalUrl) {
        return {
          href: to,
          target: '_blank',
          rel: 'noopener'
        }
      }
      return {
        to: to
      }
    }
  }
}
</script>
